<template>
  <view class="publish-reward-page">
    <!-- 自定义导航栏 -->
    <nav-bar title="发布赏金任务" :show-back="true"></nav-bar>
    
    <view class="form-container">
      <!-- 任务类型选择 -->
      <view class="form-item">
        <view class="form-label">任务类型<text class="required">*</text></view>
        <view class="type-selector">
          <view 
            v-for="(type, index) in taskTypes" 
            :key="index"
            :class="['type-item', { active: formData.rewardType === type.value }]"
            @click="selectTaskType(type.value)"
          >
            <view :class="['type-icon', type.iconClass]">
              <tn-icon :name="type.icon" size="32" color="#ffffff"></tn-icon>
            </view>
            <text class="type-name">{{ type.name }}</text>
          </view>
        </view>
      </view>
      
      <!-- 标题 -->
      <view class="form-item">
        <view class="form-label">任务标题<text class="required">*</text></view>
        <input 
          class="form-input" 
          type="text" 
          v-model="formData.title" 
          placeholder="简要描述您的任务，最多30字"
          maxlength="30"
        />
      </view>
      
      <!-- 赏金金额 -->
      <view class="form-item">
        <view class="form-label">赏金金额<text class="required">*</text></view>
        <view class="price-input">
          <text class="price-symbol">¥</text>
          <input 
            class="form-input price-value" 
            type="digit" 
            v-model="formData.amount" 
            placeholder="0.00"
          />
        </view>
      </view>
      
      <!-- 任务范围 -->
      <view class="form-item">
        <view class="form-label">任务范围<text class="required">*</text></view>
        <tn-radio-group v-model="formData.scope">
          <tn-radio v-for="(item, index) in scopeOptions" :key="index" :name="item.value">
            {{ item.name }}
          </tn-radio>
        </tn-radio-group>
        
        <!-- 选择校区，仅当scope为campus时显示 -->
        <view class="campus-selector" v-if="formData.scope === 'campus'">
          <view class="selector-label">选择校区</view>
          <view class="campus-list">
            <view 
              v-for="(campus, index) in campusList" 
              :key="index"
              :class="['campus-item', { active: formData.targetCampus.includes(campus.id) }]"
              @click="toggleCampus(campus.id)"
            >
              {{ campus.name }}
            </view>
          </view>
        </view>
      </view>
      
      <!-- 任务详情 -->
      <view class="form-item description-item">
        <view class="form-label">任务详情<text class="required">*</text></view>
        <textarea 
          class="form-textarea" 
          v-model="formData.content" 
          placeholder="请详细描述您的任务需求、注意事项等信息"
          maxlength="500"
        ></textarea>
        <view class="word-count">{{ formData.content.length }}/500</view>
      </view>
      
      <!-- 图片上传 -->
      <view class="form-item">
        <view class="form-label">上传图片<text class="tips">(可选，最多3张)</text></view>
        <view class="image-uploader">
          <view 
            v-for="(image, index) in formData.images" 
            :key="index"
            class="image-preview"
          >
            <image :src="image" mode="aspectFill"></image>
            <view class="delete-btn" @click="removeImage(index)">
              <tn-icon name="close" size="20" color="#ffffff"></tn-icon>
            </view>
          </view>
          
          <view class="upload-btn" @click="chooseImage" v-if="formData.images.length < 3">
            <tn-icon name="add" size="40" color="#999999"></tn-icon>
          </view>
        </view>
      </view>
      
      <!-- 送达地址，仅当rewardType为pickup时显示 -->
      <view class="form-item" v-if="formData.rewardType === 'pickup'">
        <view class="form-label">送达地址<text class="required">*</text></view>
        <input 
          class="form-input" 
          type="text" 
          v-model="formData.deliveryAddress" 
          placeholder="如：1号宿舍楼502室"
        />
      </view>
      
      <!-- 联系人 -->
      <view class="form-item">
        <view class="form-label">联系人<text class="required">*</text></view>
        <input 
          class="form-input" 
          type="text" 
          v-model="formData.contactName" 
          placeholder="请输入您的姓名"
        />
      </view>
      
      <!-- 联系电话 -->
      <view class="form-item">
        <view class="form-label">联系电话<text class="required">*</text></view>
        <input 
          class="form-input" 
          type="number" 
          v-model="formData.contactPhone" 
          placeholder="请输入您的联系电话"
        />
      </view>
      
      <!-- 联系微信 -->
      <view class="form-item">
        <view class="form-label">联系微信<text class="tips">(选填)</text></view>
        <input 
          class="form-input" 
          type="text" 
          v-model="formData.contactWechat" 
          placeholder="请输入您的微信号"
        />
      </view>
      
      <!-- 备注 -->
      <view class="form-item">
        <view class="form-label">备注<text class="tips">(选填)</text></view>
        <textarea 
          class="form-textarea remark-textarea" 
          v-model="formData.remark" 
          placeholder="其他需要说明的情况"
          maxlength="200"
        ></textarea>
      </view>
    </view>
    
    <!-- 底部提交按钮 -->
    <view class="bottom-submit safe-area-inset-bottom">
      <tn-button
        class="submit-btn"
        background-color="#76FF03"
        text-color="#333333"
        shape="round"
        width="90%"
        :disabled="!isFormValid"
        @click="submitForm"
      >
        发布任务
      </tn-button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import NavBar from '@/components/navbar/NavBar.vue';

// 任务类型
const taskTypes = [
  {
    name: '帮买',
    value: 'pickup',
    icon: 'cart',
    iconClass: 'pickup-icon'
  },
  {
    name: '帮取',
    value: 'fetch',
    icon: 'mail',
    iconClass: 'fetch-icon'
  },
  {
    name: '帮做',
    value: 'help',
    icon: 'bookmark',
    iconClass: 'help-icon'
  }
];

// 任务范围选项
const scopeOptions = [
  { name: '不限', value: 'all' },
  { name: '本校', value: 'current' },
  { name: '指定校区', value: 'campus' }
];

// 校区列表
const campusList = [
  { id: '1', name: '主校区' },
  { id: '2', name: '医学校区' },
  { id: '3', name: '工学校区' },
  { id: '4', name: '西校区' }
];

// 表单数据
const formData = ref({
  rewardType: 'pickup', // 默认帮买
  title: '',
  amount: '',
  scope: 'current', // 默认本校
  targetCampus: [],
  content: '',
  images: [],
  deliveryAddress: '',
  contactName: '',
  contactPhone: '',
  contactWechat: '',
  remark: ''
});

// 表单校验
const isFormValid = computed(() => {
  const basicValid = (
    formData.value.title.trim() !== '' &&
    formData.value.amount.trim() !== '' &&
    formData.value.content.trim() !== '' &&
    formData.value.contactName.trim() !== '' &&
    formData.value.contactPhone.trim() !== ''
  );
  
  // 校区校验
  const campusValid = formData.value.scope !== 'campus' || formData.value.targetCampus.length > 0;
  
  // 送达地址校验
  const addressValid = formData.value.rewardType !== 'pickup' || formData.value.deliveryAddress.trim() !== '';
  
  return basicValid && campusValid && addressValid;
});

// 当任务类型为pickup时，自动添加当前校区
watch(() => formData.value.scope, (newValue) => {
  if (newValue === 'current') {
    formData.value.targetCampus = ['1']; // 默认主校区
  } else if (newValue === 'all') {
    formData.value.targetCampus = [];
  }
});

// 选择任务类型
const selectTaskType = (type) => {
  formData.value.rewardType = type;
};

// 切换校区选择
const toggleCampus = (campusId) => {
  const index = formData.value.targetCampus.indexOf(campusId);
  if (index > -1) {
    formData.value.targetCampus.splice(index, 1);
  } else {
    formData.value.targetCampus.push(campusId);
  }
};

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 3 - formData.value.images.length,
    success: (res) => {
      formData.value.images = [...formData.value.images, ...res.tempFilePaths];
    }
  });
};

// 移除图片
const removeImage = (index) => {
  formData.value.images.splice(index, 1);
};

// 提交表单
const submitForm = () => {
  // 表单校验
  if (!isFormValid.value) {
    uni.showToast({
      title: '请填写必填项',
      icon: 'none'
    });
    return;
  }
  
  // 显示加载提示
  uni.showLoading({
    title: '发布中...'
  });
  
  // 模拟请求延时
  setTimeout(() => {
    // 隐藏加载提示
    uni.hideLoading();
    
    // 显示成功提示
    uni.showToast({
      title: '发布成功',
      icon: 'success',
      duration: 2000,
      success: () => {
        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    });
  }, 1500);
};
</script>

<style lang="scss" scoped>
.publish-reward-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx;
}

.form-container {
  padding: 20rpx;
}

.form-item {
  background-color: #ffffff;
  padding: 24rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  
  .form-label {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    
    .required {
      color: #FF5252;
      margin-left: 6rpx;
    }
    
    .tips {
      color: #999;
      font-size: 24rpx;
      font-weight: normal;
      margin-left: 10rpx;
    }
  }
  
  .form-input {
    font-size: 28rpx;
    padding: 16rpx 0;
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .form-textarea {
    width: 100%;
    height: 240rpx;
    font-size: 28rpx;
    padding: 16rpx 0;
    line-height: 1.6;
    
    &.remark-textarea {
      height: 160rpx;
    }
  }
}

.type-selector {
  display: flex;
  justify-content: space-around;
  
  .type-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 0;
    width: 30%;
    
    .type-icon {
      width: 100rpx;
      height: 100rpx;
      border-radius: 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 16rpx;
      
      &.pickup-icon {
        background-color: #76FF03;
      }
      
      &.fetch-icon {
        background-color: #32C5FF;
      }
      
      &.help-icon {
        background-color: #BA68C8;
      }
    }
    
    .type-name {
      font-size: 28rpx;
    }
    
    &.active {
      .type-name {
        color: #76FF03;
        font-weight: bold;
      }
    }
  }
}

.price-input {
  display: flex;
  align-items: center;
  
  .price-symbol {
    font-size: 32rpx;
    font-weight: bold;
    margin-right: 10rpx;
    color: #FF5252;
  }
  
  .price-value {
    border-bottom: 1px solid #f0f0f0;
    flex: 1;
    color: #FF5252;
    font-weight: bold;
  }
}

.campus-selector {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1px solid #f0f0f0;
  
  .selector-label {
    font-size: 28rpx;
    margin-bottom: 16rpx;
  }
  
  .campus-list {
    display: flex;
    flex-wrap: wrap;
    
    .campus-item {
      padding: 12rpx 24rpx;
      background-color: #f8f8f8;
      border-radius: 30rpx;
      margin-right: 16rpx;
      margin-bottom: 16rpx;
      font-size: 26rpx;
      
      &.active {
        background-color: #76FF03;
        color: #333;
      }
    }
  }
}

.description-item {
  position: relative;
  
  .word-count {
    position: absolute;
    bottom: 24rpx;
    right: 24rpx;
    font-size: 24rpx;
    color: #999;
  }
}

.image-uploader {
  display: flex;
  flex-wrap: wrap;
  
  .image-preview, .upload-btn {
    width: 200rpx;
    height: 200rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
    border-radius: 12rpx;
    overflow: hidden;
  }
  
  .image-preview {
    position: relative;
    
    image {
      width: 100%;
      height: 100%;
    }
    
    .delete-btn {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      width: 40rpx;
      height: 40rpx;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  
  .upload-btn {
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #ddd;
  }
}

.bottom-submit {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 20rpx 0;
  display: flex;
  justify-content: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style> 